<template>
    <div class="box">
      <img src="/public/shop.jpg" alt="" width="100%" height="99%" />
      <div class="box1">
        <p class="p1">社区团购</p>
        <p class="p2">A X L a b 社 区 团 管 理 中 心</p>
      </div>
      <div class="box2">
        <div class="box3">
          <h4>Axlab社区团购</h4>
          <p style="margin-top: 10px; color: #999999; font-size: 14px">
            修改密码
          </p>
          <div class="box4">
            <el-input v-model="username" style="width: 100%; height: 45px" placeholder="请输入手机号/邮箱" :prefix-icon="User" />
            <el-input v-model="password" style="width: 100%; height: 45px" placeholder="请输入密码" :prefix-icon="Unlock" type="password" show-password/>
            <el-input v-model="password1" style="width: 100%; height: 45px" placeholder="请再次输入密码" :prefix-icon="Unlock" type="password" show-password/>
            <p style="display: flex;">
              <el-input v-model="Verification" style="width: 70%; height: 45px" placeholder="请输入验证码"
                :prefix-icon="ChatDotRound" />
              <el-button type="danger" style="width: 30%; height: 45px" @click="getcode"
                :disabled="isSendingCode || countdown > 0">{{ countdown > 0 ? `重新发送(${countdown})` : '发送验证码'
                }}</el-button>
            </p>
          </div>
          <van-button type="danger" block style="width: 100%; margin-top: 20px" @click="submit">修改密码</van-button>
        </div>
      </div>
  
      <van-overlay :show="show" @click="show = false">
        <el-card v-if="visible" style="margin: 210px auto;width: 450px;">
          <slide-verify ref="slide" slider-text="向右滑动->" :imgs="images" @success="onSuccess" @fail="onFail"
            class="slide"></slide-verify>
        </el-card>
      </van-overlay>
  
  
    </div>
  </template>
  
  <script setup>
  import { Unlock, User, ChatDotRound } from '@element-plus/icons-vue';
  import { useRouter } from 'vue-router';
  import { reactive, ref } from 'vue'
  import { ElMessage } from "element-plus";
  // 引入依赖对象
  import SlideVerify from "vue3-slide-verify";
  // 引入依赖样式
  import "vue3-slide-verify/dist/style.css";
  import axios from 'axios';
  const router = useRouter();
  const password1 = ref('');
  const password = ref('');
  const username = ref('');
  const code = ref('');
  const show = ref(false);
  const phoneRegex = /^1\d{10}$/;  // 匹配中国手机号（以1开头，11位数字）
  const qqEmailRegex = /^[0-9]{5,12}@qq\.(com|cn)$/;  // 支持@qq.com 和@qq.cn  // 匹配QQ邮箱，QQ号长度一般为5到12位
  const back = () => {
    router.go(-1);
  };
  const getcode = () => {
    if (phoneRegex.test(username.value) || qqEmailRegex.test(username.value)) {
      if (password.value == password1.value) {
        visible.value = true;
        show.value = true
      } else {
        ElMessage({
          message: '两次输入的密码不一样',
          type: 'error',
        })
      }
    } else {
      ElMessage({
        message: '请输入正确的电话/邮箱',
        type: 'error',
      })
    }
  }

  const submit = async () => {
    if (phoneRegex.test(username.value)) {
      //手机号修改密码接口
      const { data } = await axios.post('http://localhost:3000/jsb/uplphone', {
        username: username.value,
        password: password.value
      })
      if (data.code == 200) {
        ElMessage({
          message: '修改成功',
          type: 'success',
        })
        router.push('/login')
      } else {
        ElMessage({
          message: '修改失败',
          type: 'error',
        })
      }
    } else if (qqEmailRegex.test(username.value)) {
      // 邮箱修改密码接口
      if (Verification.value == code.value) {
        const { data } = await axios.post('http://localhost:3000/jsb/uplregister', {
          username: username.value,
          password: password.value,
          code: code.value
        })
        console.log(data);
        
        if (data.code == 200) {
          ElMessage({
            message: '修改成功',
            type: 'success',
          })
          router.push('/login')
        } else {
          ElMessage({
            message: '修改失败',
            type: 'error',
          })
        }
  
      }
    } else {
      alert('请输入正确的电话/邮箱')
    }
  }
  

  const Verification = ref('');
  
  const visible = ref(false);
  const images = reactive([
    'https://t7.baidu.com/it/u=2609096218,1652764947&fm=193&f=GIF',
    'https://t7.baidu.com/it/u=2541348729,1193227634&fm=193&f=GIF',
    'https://t7.baidu.com/it/u=2673836711,2234057813&fm=193&f=GIF',
  ])
  
  // 拼图验证成功回调
  const onSuccess = async () => {
    if (phoneRegex.test(username.value)) {
      show.value = false;
      //手机号注册接口
      const { data } = await axios.get('http://localhost:3000/jsb/getphones?phone=' + username.value)
      if (data.code == 400) {
        ElMessage.error('该手机号未被注册')
      } else {
        ElMessage.success("验证成功！");
        // 隐藏拼图
        visible.value = false;
        // 拼图验证成功，发送邮箱验证码
        sendVerificationCode();
      }
    } else if (qqEmailRegex.test(username.value)) {
      show.value = false;
      // 发送邮箱接口
      const { data } = await axios.get('http://localhost:3000/jsb/codes?email=' + username.value)
      if (data.code == 400) {
        ElMessage.error('该邮箱未被注册')
      } else {
        ElMessage.success("验证成功！");
        // 隐藏拼图
        visible.value = false;
        // 拼图验证成功，发送邮箱验证码
        sendVerificationCode();
      }
    } else {
      alert('请输入正确的电话/邮箱')
    }
  
  }
  
  // 拼图验证失败回调
  const onFail = () => {
    ElMessage.error("验证不通过!")
  }
  
  // 发送验证码按钮禁用标识
  let isSendingCode = ref(false);
  // 倒计时变量
  let countdown = ref(0);
  // 发送验证码，调验证码接口
  const sendVerificationCode = async () => {
    if (phoneRegex.test(username.value)) {
      show.value = false;
      //手机号注册接口
      const { data } = await axios.get('http://localhost:3000/jsb/getphones?phone=' + username.value)
      isSendingCode.value = true;
      // 设置倒计时时间，这里假设为60秒
      countdown.value = 60;
      // 倒计时效果
      const countdownInterval = setInterval(() => {
        countdown.value--;
        if (countdown.value <= 0) {
          clearInterval(countdownInterval);
          isSendingCode.value = false;
        }
      }, 1000);
    } else if (qqEmailRegex.test(username.value)) {
      show.value = false;
      // 发送邮箱接口
      const { data } = await axios.get('http://localhost:3000/jsb/codes?email=' + username.value)
      console.log(data);
      
      code.value = data.code
      isSendingCode.value = true;
      // 设置倒计时时间，这里假设为60秒 
      countdown.value = 60;
      // 倒计时效果
      const countdownInterval = setInterval(() => {
        countdown.value--;
        if (countdown.value <= 0) {
          clearInterval(countdownInterval);
          isSendingCode.value = false;
        }
      }, 1000);
    }
  }
  </script>
  
  <style lang="scss" scoped>
  * {
    margin: 0;
    padding: 0;
  }
  
  .box {
    width: 100vw;
    height: 100vh;
  
    img {
      filter: blur(5px);
      z-index: -1;
    }
  }
  
  .box1 {
    position: absolute;
    top: 120px;
    left: 50px;
    color: rgb(255, 255, 255);
  
    .p1 {
      font-size: 80px;
    }
  
    .p2 {
      margin-top: 10px;
      font-size: 25px;
      font-weight: 700;
    }
  }
  
  .box2 {
    width: 450px;
    height: 100%;
    background-color: rgb(255, 255, 255);
    position: absolute;
    top: 0;
    right: 0;
  }
  
  .box3 {
    width: 80%;
    height: 50%;
    margin: 150px auto;
  }
  
  .box4 {
    width: 100%;
    height: 220px;
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  
  .slide {
    margin: 0 auto;
  }
  </style>